<template>
  <div>
    <header class="game_modal_header">接待</header>
    <div class="main_box">
      <div v-loading="loading" class="gl_mb_20 gl_pb_10 list" style="max-height: 800px">
        <div
          v-if="carData.length > 0"
          ref="scrollH"
          v-infinite-scroll="load"
          :infinite-scroll-immediate="false"
          :infinite-scroll-disabled="disabled"
          style="overflow:auto; overflow-y: scroll;"
        >
          <div ref="contentBox">
            <div v-for="item in carData" :key="item.id">
              <div class="content_box" :class="[ item.isShowDetail ? 'content_border_b': '' ]">
                <el-row :gutter="20" type="flex" justify="space-between">
                  <el-col :span="14">
                    <p class="gl_fs_16 gl_mb_5" style="line-height: 40px">
                      <span>{{ item.departureStation }}</span>
                      <span class="gl_ft_weight"> -- </span>
                      <span>{{ item.arrivalStation }}</span>
                    </p>
                  </el-col>
                  <el-col :span="6" align="right">
                    <div class="gl_mr_10 gl_mt_10">
                      <el-button type="text" size="small" style="font-size: 14px; margin-top: 6px" @click="showDetail(item)">
                        <span class="gl_pr_10">展开</span>
                        <span class="gl_pr_10"><i class="el-icon-arrow-right" :class="[ item.isShowDetail ? 'arrow_down': 'arrow_right' ]" /></span>
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <div v-show="item.isShowDetail" class="gl_ml_20">
                <div v-if="item.children.length > 0" v-loading="item.carLoading">
                  <div v-for="(jtem, jndex) in item.children" :key="jtem.id" class="gl_py_15 gl_ml_20 gl_px_20" :class="[ jndex !== item.children.length -1 ? 'content_border_b': '' ]">
                    <el-row :gutter="20" type="flex" justify="space-between">
                      <el-col :span="14">
                        <div class="gl_dis_ib gl_middle">
                          <img class="roomPhoto" :src="getStaticFileUrl(jtem.carImage)" alt="" @error="errorPhoto">
                        </div>
                        <div class="gl_dis_ib gl_top">
                          <p class="gl_ft_weight gl_fs_14">{{ jtem.carType || '- -' }}</p>
                          <p class="address gl_mb_15">
                            <span class="gl_mr_5">{{ jtem.carColor || '- -' }}</span>
                            <span class="gl_mr_10">{{ jtem.carSeatName || '- -' }}</span>
                          </p>
                          <p class="gl_fs_14">
                            <span>运营时间：{{ 10 > jtem.runningStartHour ? '0' + jtem.runningStartHour : jtem.runningStartHour }}:{{ 10 > jtem.runningStartMinute ? '0' + jtem.runningStartMinute : jtem.runningStartMinute }} - {{ 10 > jtem.runningEndHour ? '0' + jtem.runningEndHour : jtem.runningEndHour }}:{{ 10 > jtem.runningEndMinute ? '0' + jtem.runningEndMinute : jtem.runningEndMinute }}</span>
                          </p>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div :class="[ jtem.isPicksUp && jtem.isSends ? 'gl_mt_15': 'mt_X' ]" class="">
                          <p v-if="jtem.isPicksUp" class="gl_fs_14 gl_mb_10">
                            <span>接车价格：</span>
                            <span class="price">￥{{ (jtem.picksUpPrice / 100).toFixed(2) || '- -' }}</span>
                          </p>
                          <p v-if="jtem.isSends" class="gl_fs_14">
                            <span>送车价格：</span>
                            <span class="price">￥{{ (jtem.sendsPrice / 100).toFixed(2) || '- -' }}</span>
                          </p>
                        </div>
                      </el-col>
                      <el-col :span="4" class="gl_pt_15">
                        <div class="gl_pt_20 gl_ml_5">
                          <el-button type="info" :disabled="!canOrder" :class="[ canOrder ? 'order': 'no_order' ]" size="small" @click="order(jtem, 'order')">立即预定</el-button>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </div>
                <div v-else class="gl_noData_mockTable">
                  <p>暂无车辆数据</p>
                </div>
              </div>
            </div>
            <el-row
              v-if="dataLoading"
              v-loading="dataLoading"
              style="height: 50px"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
            />
          </div>
        </div>
        <div v-else style="line-height: 400px" class="gl_noData_mockTable">
          <p>暂无数据</p>
        </div>
      </div>
    </div>
    <div v-if="orderData.receptionEntrys && orderData.receptionEntrys.length > 0" class="main_box order_table">
      <p class="title gl_ml_20 gl_pl_5">已订接送</p>
      <el-table v-loading="tableLoading" class="gl_mt_10 gl_table_noBorder" :data="orderData.receptionEntrys" size="mini">
        <el-table-column label="接送地点" :min-width="160">
          <template slot-scope="{ row }">
            <span>{{ row.departureStation }}</span>
            <span> -- </span>
            <span>{{ row.arrivalStation }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="carType" label="车辆类型" />
        <el-table-column prop="receptionName" label="预定人姓名" :min-width="120" />
        <el-table-column prop="receptionPhoneNumber" label="预订人手机号" :width="100" />
        <el-table-column prop="trainNumber" label="车次" />
        <el-table-column prop="pickUpCarTime" label="接车时间" :width="140" align="center">
          <template slot-scope="{ row }">
            <span v-if="row.pickUpCarTime == '0001-01-01T00:00:00' || row.pickUpCarTime == null">- -</span>
            <span v-else>{{ row.pickUpCarTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="pickUpCarNumber" label="接车车辆数量" :width="100" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.pickUpCarNumber || '- -' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="deliverCarTime" label="送车时间" :width="140" align="center">
          <template slot-scope="{ row }">
            <span v-if="row.deliverCarTime == '0001-01-01T00:00:00' || row.deliverCarTime == null">- -</span>
            <span v-else>{{ row.deliverCarTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="deliverCarNumber" label="送车车辆数量" :width="100" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.deliverCarNumber || '- -' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" :width="160">
          <template slot-scope="{ row }">
            <span>{{ row.remark || '- -' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="金额">
          <template slot-scope="{ row }">
            <span>￥{{ (row.amount / 100).toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" :width="90" fixed="right">
          <template slot-scope="{ row }">
            <el-button type="text" size="mini" @click="edit(row, 'edit')">编辑</el-button>
            <el-button type="text" size="mini" @click="remove(row)">
              <span class="gl_color_error">删除</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-row class="gl_mt_20 gl_pt_5" type="flex" justify="center">
      <el-col align="center">
        <el-button v-if="hasPrev" type="primary" plain class="prev" size="small" style="border-radius: 8px;" @click="toPrev()">上一步</el-button>
        <el-button v-if="hasNext" type="primary" size="small" style="border-radius: 8px;" @click="toNext()">下一步</el-button>
        <el-button v-if="toOrder" type="primary" size="small" style="border-radius: 8px; background: #ff704a; border-color: #ff704a;" @click="toNext()">去结算</el-button>
      </el-col>
    </el-row>
    <Reception ref="reception" />
  </div>
</template>

<script>
import defaultHotelImg from '@/assets/images/face_default.png';
import Reception from './reception.vue';
import {
  api_GET_EventsManagementReceptionEntryCompetitionPickUpAddressCompetitionId, // 接待
  api_GET_EventsManagementReceptionEntryCompetitionReceptionModelOfCarReceptionId, // 车辆
  api_GET_EventsManagementLogisticReservationTimeCompetitionReservationTime, // 预定时间
  api_GET_EventsManagementReceptionEntryReceptionEntryLogisticEntryId, // 获取预定中的接待报名数据
  api_DELETE_EventsManagementReceptionEntryReceptionEntryLogisticEntryId // 删除
} from '@/extend/api/gameswaggerApi/app';
import {
} from '@/lib/form/game/swaggerForm';
import { Page } from '@/lib/form/common';
export default {
  name: 'ReceptionList',
  components: {
    Reception
  },
  props: {
    form: {
      type: Object,
      default() {
        return {};
      }
    },
    isShow: {
      type: Boolean,
      default: false
    },
    hasPrev: {
      type: Boolean,
      default: true
    },
    hasNext: {
      type: Boolean,
      default: true
    },
    toOrder: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false, // 酒店列表
      dataLoading: false, // 滚动加载
      tableLoading: false, // 已预订
      defaultHotelImg: defaultHotelImg,
      Page: new Page(),
      isTrain: false, // 是否是培训
      totalPage: 0, // 总条目数
      realWidth: '', // 酒店列表div真实高度
      screenHeight: '', // 酒店列表div高度
      carData: [], // 接待列表
      carOrderTime: {}, // 后勤设置的接待预定时间
      canOrder: true, // 是否可以预定，当前时间超过设置的接待预定时间的结束时间，预定按钮不可用
      orderData: {} // 预定中的接待数据
    };
  },
  computed: {
    // 没有更多了
    noMore () {
      const Page = Math.ceil(this.totalPage / 10);
      return this.Page.Page >= Page;
    },
    disabled () {
      return this.dataLoading || this.noMore;
    }
  },
  watch: {
    isShow: {
      immediate: true,
      handler(val) {
        if (val) {
          if (this.$route.name.indexOf('Train') > -1) {
            this.isTrain = true; // 是培训
          }
          this.getData();
          this.getTime();
          if (this.form.id) {
            this.getOrderData();
          }
        }
      }
    }
  },
  created() {
    if (this.$route.name.indexOf('Train') > -1) {
      this.isTrain = true; // 是培训
    }
  },
  methods: {
    // 下一步 or 去结算
    toNext() {
      this.$emit('toNext');
    },
    // 上一步
    toPrev() {
      this.$emit('toPrev');
    },
    // 获取接待数据
    getData(page) {
      var that = this;
      that.loading = true;
      that.Page.Page = page || 1;
      that.Page.SkipCount = (that.Page.Page - 1) * that.Page.MaxResultCount;
      api_GET_EventsManagementReceptionEntryCompetitionPickUpAddressCompetitionId(that.$route.query.id, that.Page).then(res => {
        let carList = res.items || [];
        that.totalPage = res.totalCount;
        if (carList.length > 0) {
          carList = carList.map(item => {
            return { ...item, isShowDetail: false, carLoading: false, children: [] };
          });
        }
        that.carData = carList;
        if (carList.length > 0) {
          that.$nextTick(() => {
            if (that.totalPage < 10) {
              that.realHeight = that.$refs.contentBox.offsetHeight;
              that.scrollHeight = that.realHeight > 800 ? 800 + 'px' : that.realHeight + 'px';
              that.$refs.scrollH.style.height = that.scrollHeight;
            } else {
              that.$refs.scrollH.style.height = '800px';
            }
          });
        }
        that.loading = false;
      }, (error) => {
        that.loading = false;
        that.$message({ type: 'error', message: error.error.message || '获取接待列表失败！' });
      });
    },
    // 滚动加载
    load () {
      var that = this;
      that.dataLoading = true;
      that.Page.Page = that.Page.Page + 1;
      that.Page.SkipCount = (that.Page.Page - 1) * that.Page.MaxResultCount;
      api_GET_EventsManagementReceptionEntryCompetitionPickUpAddressCompetitionId(that.$route.query.id, that.Page).then(res => {
        let carList = res.items || [];
        that.totalPage = res.totalCount;
        if (carList.length > 0) {
          carList = carList.map(item => {
            return { ...item, isShowDetail: false, carLoading: false, children: [] };
          });
          carList.forEach(function (item) {
            that.carData.push(item);
          });
        }
        that.dataLoading = false;
      }, (error) => {
        that.dataLoading = false;
        that.$message({ type: 'error', message: error.error.message || '获取接待列表失败！' });
      });
    },
    // 获取后勤设置的接待预定时间
    getTime() {
      var that = this;
      const providerName = this.isTrain ? 'T' : 'C';
      const form = {
        reservationCode: 'Reception',
        providerKey: this.$route.query.id,
        providerName: providerName
      };
      api_GET_EventsManagementLogisticReservationTimeCompetitionReservationTime(form).then(res => {
        that.carOrderTime = res || {};
        var nowDay = new Date();
        nowDay.setTime(nowDay.getTime() - 24 * 60 * 60 * 1000);
        var endDay = new Date(res.endDateTime);
        if (nowDay > endDay) {
          that.canOrder = false;
        }
      }, (error) => {
        that.$message({ type: 'error', message: error.error.message });
      });
    },
    // 重置搜索表单
    reset() {
      this.Page = new Page();
      this.getData();
    },
    // 查看详情
    showDetail(item) {
      var that = this;
      item.isShowDetail = !item.isShowDetail;
      if (item.isShowDetail) {
        item.carLoading = true;
        const id = item.receptionId;
        api_GET_EventsManagementReceptionEntryCompetitionReceptionModelOfCarReceptionId(id).then(res => {
          that.carData.forEach((temp, index) => {
            if (temp.receptionId === id) {
              that.carData[index].children = res.items || [];
              that.carData[index].carLoading = false;
            }
          });
          that.$nextTick(() => {
            that.realHeight = that.$refs.contentBox.offsetHeight;
            that.scrollHeight = that.realHeight > 800 ? 800 + 'px' : that.realHeight + 'px';
            that.$refs.scrollH.style.height = that.scrollHeight;
          });
        }, error => {
          that.$message({ type: 'error', message: error.error.message || '获取车辆信息失败！' });
          item.carLoading = false;
        });
      } else {
        that.$nextTick(() => {
          that.realHeight = that.$refs.contentBox.offsetHeight;
          that.scrollHeight = that.realHeight > 800 ? 800 + 'px' : that.realHeight + 'px';
          that.$refs.scrollH.style.height = that.scrollHeight;
        });
      }
    },
    // 预订房间
    order(car, code) {
      const id = this.form.id;
      this.$refs.reception.open(car, code, id, this.carOrderTime);
    },
    // 获取已预订的接待车辆
    getOrderData() {
      var that = this;
      that.tableLoading = true;
      api_GET_EventsManagementReceptionEntryReceptionEntryLogisticEntryId(this.form.id).then(res => {
        that.orderData = res || {};
        that.tableLoading = false;
      }, (error) => {
        that.tableLoading = false;
        that.$message({ type: 'error', message: error.error.message });
      });
    },
    // 编辑
    edit(row, code) {
      this.$refs.reception.open(row, code, row.id, this.carOrderTime);
    },
    // 删除
    remove(row) {
      var that = this;
      that.$confirm(`您确定要删除该预订吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api_DELETE_EventsManagementReceptionEntryReceptionEntryLogisticEntryId(row.id).then((res) => {
          if (res) {
            that.getOrderData();
            that.$message({ type: 'success', message: '删除成功！' });
          }
        }, error => {
          that.$message({ type: 'error', message: '删除失败！' + (error.error && error.error.message || '') });
        });
      }).catch(() => {});
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultHotelImg;
    },
    // 分页
    sizeChange: function(MaxResultCount) {
      this.Page.MaxResultCount = MaxResultCount; // 每页显示条目数
      this.getData();
    },
    pageIndexChange(currentPage) {
      this.getData(currentPage);
    }
  }
};
</script>
<style scoped>
.title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}
.address {
  font-size: 12px;
  line-height: 20px;
  color: #828282;
}
.mt_X {
  margin-top: 36px;
}
.el-scrollbar /deep/ .el-scrollbar__wrap{
  overflow-x: hidden;
}
.el-table,.el-table /deep/ .el-table__body-wrapper {
  min-height: auto;
}
</style>
